<template>
	<section class="scholl border-box" v-if="detail_list">
		<div class="border-b20 pl30rem pr30rem pb30rem pt30rem" style="line-height: 1.5rem">
			<strong class="cxo-red-color mb20rem">{{refund_reason}}</strong>
			<p>{{ detail_list.refund_time * 1000,'yyyy年MM月dd日 hh:mm:ss' | formatDate }}</p>
		</div>
		<div class="">			
			<ul class="pl30rem pr30rem">
				<li class="layout border-b pt30rem pb30rem">
					<strong class="bold">退款金额：</strong>
					<span class="cxo-red-color">￥{{detail_list.refund_real_money}}</span>
				</li>
				<li class="mb20" v-if="detail_list.content">
					<strong class="bold pt30rem pb30rem block">退款信息</strong>
					<div class="bg-f5 flex-left pl30rem pr30rem pt20rem pb20rem">
						<img :src="img_url + detail_list.content[0].goods_picture" alt="" style="width:7.14rem; height:7.14rem">
						<div class="flex_1 ml20rem">
							<p class="bold ellipsis-more" style="height:3rem">{{ detail_list.content[0].goods_name }}</p>
						</div>
					</div>
				</li>
				<li class="c333">
					<p>
						<small class="fs24rem c999">
							退款原因：{{detail_list.refund_reason}}
						</small>
					</p>
					<p>
						<small class="fs24rem c999">
							退款金额：{{detail_list.refund_reason}}
						</small>
					</p>
					<p>
						<small class="fs24rem c999">
							申请时间：{{detail_list.refund_time * 1000,'yyyy-MM-dd' | formatDate }}
						</small>
					</p>
					<p>
						<small class="fs24rem c999">
							退款编号：{{detail_list.order_no}}
						</small>
					</p>
				</li>
			</ul>										
		</div>		
		<footer class="commodity-footer bg-white layout border-t align-center ">
			<span class="w50 fs24rem c666 pl15rem pr15rem border-r" @click="contractService()">联系客服</span>
			<span class="btn-text w50 fs24rem c666 pl15rem pr15rem" @click="tel()"><a :href="'tel:'+phoneMess">拨打电话</a></span>
		</footer>	
	</section>

</template>

<script>
	import { refundDetail }  from '@/api/ordering';
	import { getShopTel } from '@/api/member';
	import { formatDate } from '@/utils';
	import $toast from '@/utils/toast';

	export default
	{
		data() 
		{
			return{
				detail_list : [],
				uid         : localStorage.getItem('uid'),
				order_id    : this.$route.query.order_id,
				shop_id		: this.$route.query.shop_id,
				refund_reason: this.$route.query.tips,
				img_url     : process.env.IMG_URL,
				phoneMess	: '',
			}
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
	  	},		
		methods:
		{
			loadData()
			{
				refundDetail(this.uid, this.order_id).then( res=> {
					this.detail_list = res.data[0];
					//console.log(this.detail_list);
				});	
			},
			contractService() {
				$toast('该功能暂未开通')
			},
			tel() {
				getShopTel(this.shop_id).then ( res => {
					if ( res.data.code == 1) {
						$toast(res.data.msg);
					} else {
						this.phoneMess = res.data.shop_phone;
					}
				})
			}
		},
		created()
		{
			this.loadData();
			this.tel();
		}
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;		
		.order-list{		
				
			.body-item{
				border-bottom: 1px solid #eee;
				.body{
					img{
						width: 147/28rem;
						height: 147/28rem;
					}
					.goods-info{
						width: 510/28rem;
						.goods-text{
							height: 90/28rem;
						}
						.layout{
							align-items: flex-start;
						}
					}
				}
			}				
			.button{
				border-radius: 4px;
			}
			.delete-btn{
				color: #333333;
				border: 1px solid #333333;
			}
			.assess-btn{
				color: #ff0036;
				border: 1px solid #ff0036;
			}
			
		}
		
	}
	.border-box * {
		box-sizing: border-box;
	}
	footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 3rem;
	}
	
</style>

